<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-card class="box-card">
        <template slot="header">
          <el-row type="flex" justify="space-between" align="middle">
            <!-- <div> -->
            <el-button type="primary" size="small" @click="add">添加页面</el-button>
            <!-- </div> -->
            <!-- <div style="margin-top: 15px;"> -->
            <el-input v-model="input" style="width:300px" placeholder="请输入内容" class="input-with-select">
              <el-button slot="append" @click="screen">筛选</el-button>
            </el-input>
            <!-- </div> -->
          </el-row>
        </template>
        <el-table :data="tableData" row-key="id" border style="width: 100%">
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="content" label="内容">
            <template v-slot="{row}">
              <p v-html="row.content" />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button type="primary" @click="edit(row.id)">编辑</el-button>
              <el-button type="danger" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            :page-size="limit"
            layout="prev, pager, next"
            :total="length"
            style="margin-top:20px"
            @current-change="currentPage"
          />
        </el-row>
      </el-card>
      <!-- 弹窗组件 -->
      <addPage ref="addPage" :show-dialog.sync="showDialog" @updateEvent="getPageList" />
    </div>
  </div>
</template>

<script>
import addPage from './components/add-page.vue'
import { getPage, arrLength, delPage } from '@/api/page'
export default {
  components: { addPage },
  data() {
    return {
      input: '',
      tableData: [],
      limit: 2, // 每页数量
      start: 0,
      showDialog: false,
      length: 0
    }
  },
  created() {
    // 刷新页面
    this.getPageList()
  },
  methods: {
    // 获取数据列表
    async getPageList() {
      console.log(11)
      const res = await getPage({
        _limit: this.limit,
        _start: this.start,
        title_contains: this.input
      })
      this.tableData = res
      // 获取页面数量
      const length = await arrLength({
        title_contains: this.input
      })
      this.length = length
    },
    // 添加弹窗
    add() {
      this.showDialog = true
    },
    // 分页器
    currentPage(val) {
      this.start = (val - 1) * this.limit
      this.getPageList()
    },
    // 编辑按钮
    edit(id) {
      this.showDialog = true
      this.$refs.addPage.pagesId(id)
    },
    // 删除页面
    del(id) {
      this.$confirm('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delPage(id)
        // 判断是否是最后一页的最后一条数据
        console.log(this.start)
        if (this.tableData.length === 1 && this.start !== 0) {
          this.start -= 2
        }
        // 渲染页面
        this.getPageList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 筛选
    screen() {
      // 刷新页面
      console.log(119, this.getPageList())
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 20px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

  /* .el-select .el-input {
    width: 130px;
  } */
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
